<template>
	<view>
		<view class="superior-item" @click="openPopup()">
			<view class="superior-item-top">
				<image src="../../static/imges/icon_binding_trace_code@2x.png" class="superior-item-logo"></image>
				<view class="superior-item-title">药品绑定追溯码</view>
				<image src="../../static/imges/icon_enter_progress@2x.png" class="superior-item-click"></image>
			</view>
			<view class="superior-item-word">操作示意图</view>
			<view class="superior-item-tutorials">
				<view class="superior-tutorials-list"
				v-for="(item,index) in list"
				:key="index"
				>
					<image :src="item.logo" class="superior-tutorials-logo"></image>
					<view class="superior-tutorials-word">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="superior-item">
			<view class="superior-item-top">
				<image src="../../static/imges/icon_put_the_drug@2x.png" class="superior-item-logo"></image>
				<view class="superior-item-title">摆放药品</view>
			</view>
			<view class="superior-item-word">摆放注意点</view>
			<view class="superior-item-remind">
				<view class="superior-remind-word">大件药品须放在货道底部的货道</view>
				<view class="superior-remind-word">货道左右两侧禁放药品</view>
			</view>
		</view>
		
		<view class="superior-item">
			<view class="superior-item-top">
				<image src="../../static/imges/icon_automatic_shelves@2x.png" class="superior-item-logo"></image>
				<view class="superior-item-title">自动上架</view>
				<view class="superior-item-upload">自动上架</view>
			</view>
			<view class="superior-item-word">操作示意图</view>
			<view class="superior-item-tutorials">
				<view class="superior-tutorials-list"
				v-for="(item,index) in automaticlist"
				:key="index"
				>
					<image :src="item.logo" class="superior-tutorials-logo"></image>
					<view class="superior-tutorials-word">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="superior-item2">
			<view class="superior-item-top">
				<image src="../../static/imges/icon_self_inspection@2x.png" class="superior-item-logo"></image>
				<view class="superior-item-title">自检</view>
				<view class="superior-item-upload" @click="openUploadpopup">自检上传</view>
			</view>
		</view>
		
		
		
		
		<uni-popup ref="popup" type="bottom">
			<view class="popup-core">
				<view class="popup-item">
					<view class="popup-item-forms">
						<view class="popup-forms-title">药品名称</view>
						<input type="text" placeholder="请用扫描仪扫描药盒上的一维码" class="popup-forms-inp"/>
						<image src="../../static/imges/icon_scar_drug@2x.png" class="popup-forms-scar"></image>
					</view>
					<view class="popup-item-forms">
						<view class="popup-forms-title">二维码</view>
						<input type="text" placeholder="请用扫描仪扫描药盒上的二维码" class="popup-forms-inp"/>
						<image src="../../static/imges/icon_scar_drug@2x.png" class="popup-forms-scar"></image>
					</view>
					<view class="popup-item-forms">
						<view class="popup-forms-title">商品底价</view>
						<input type="text" placeholder="请输入" class="popup-forms-inp"/>
					</view>
					<view class="popup-forms-pricing">
						<view class="popup-forms-list" style="width: 236rpx;">
							<view class="popup-forms-title">线下售价</view>
							<input type="text" placeholder="请输入" maxlength="8" class="popup-forms-inp"/>
						</view>
						<view class="popup-forms-list" style="width: 250rpx; margin: 0 46rpx;">
							<view class="popup-forms-title">美团售价</view>
							<input type="text" placeholder="请输入" maxlength="8" class="popup-forms-inp"/>
						</view>
						<view class="popup-forms-list" style="width: 262rpx; margin: 0 32rpx 0 22rpx;">
							<view class="popup-forms-title">饿了么售价</view>
							<input type="text" placeholder="请输入" maxlength="8" class="popup-forms-inp"/>
						</view>
					</view>
					<view class="popup-item-forms">
						<view class="popup-forms-title">商品编码</view>
						<input type="text" placeholder="扫码获取" class="popup-forms-inp"/>
					</view>
					<view class="popup-item-forms">
						<view class="popup-forms-title">批次号</view>
						<input type="text" placeholder="根据药品信息输入" class="popup-forms-inp"/>
					</view>
					<view class="popup-item-forms">
						<view class="popup-forms-title">有效期</view>
						<input type="text" placeholder="根据药品信息输入" class="popup-forms-inp"/>
					</view>
				</view>
				<view class="popup-shop">
					<view class="popup-shop-top">
						<view class="popup-shop-logo"><image src="../../static/icon_logo.png" class="popup-core-shoplogo"></image></view>
						<view class="popup-shop-right">
							<view class="popup-shop-title">诺斯清 生理性海水鼻腔护理喷雾</view>
							<view class="popup-shop-format">规格：10g*9袋</view>
						</view>
					</view>
					<view class="popup-bind" @click="closePopup()">绑定</view>
				</view>
			</view>
			
		</uni-popup>
		<uni-popup ref="Uploadpopup" type="center">
			<view class="Uploadpopup-core">
				<our-loading active>
					<image src="../../static/Untitled.gif" class="Uploadpopup-core-img"></image>
				</our-loading>
				<view class="Uploadpopup-core-schedule">30<text>%</text></view>
				<view class="Uploadpopup-core-title">自检中</view>
				<view class="Uploadpopup-core-word">自检中请勿退出</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni/uni-popup/uni-popup.vue';
	import ourLoading from '@/components/our-loading/our-loading.vue';
	export default {
		components:{
			uniPopup,
			ourLoading
		},
		data() {
			return {
				list: [
					{ logo: require("../../static/imges/icon_scan_one_dimension_code_of_drug@2x.png"), name: '扫描药品一维码' },
					{ logo: require("../../static/imges/icon_print_trace_code@2x.png"), name: '打印追溯码' },
					{ logo: require("../../static/imges/icon_paste_print_code@2x.png"), name: '粘贴打印码' },
					{ logo: require("../../static/imges/icon_to_bind@2x.png"), name: '进行绑定' }
				],
				automaticlist: [
					{ logo: require("../../static/imges/icon_keep_medicine_in_place@2x.png"), name: '摆放好药品' },
					{ logo: require("../../static/imges/icon_click_auto_shelf@2x.png"), name: '点击自动上架' },
					{ logo: require("../../static/imges/icon_paste_print_code@2x.png"), name: '绑定上架' }
				],
			}
		},
		onLoad() {

		},
		methods: {
			closePopup() {
				this.$refs.popup.close();
			},
			openPopup() {
				this.$refs.popup.open();
			},
			openUploadpopup() {
				this.$refs.Uploadpopup.open();
			}
		}
	}
</script>

<style lang="less">
	@import './superior.less';
</style>
